<template>
    <div class="box">
        <div class="title">问卷调查满意度总数</div>
        <v-chart :option="option" autoresize class="charts"></v-chart>
    </div>
</template>

<script>
export default {
    props: ["data"],
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler() {
                this.option.series[0].data = this.data
            }

        }
    },
    data() {
        return {
            option: {
                legend: {
                    top: 'top',
                    left: "2%",
                    top: "4%",
                    textStyle: {
                        fontSize: 16,
                    }
                },
                tooltip: {
                    formatter: (params) => {
                        return `${params.name}`
                    }
                },

                series: [
                    {
                        label: {
                            show: false
                        },
                        color: ["#008EF2", "#586BFA"],
                        type: 'pie',
                        radius: ["20%", "50%"],
                        center: ['50%', '50%'],
                        roseType: 'radius',

                        itemStyle: {
                            borderRadius: 2
                        },
                        data: [
                            // { value: 40, name: '总任务数' },
                            // { value: 38, name: '已完成任务数' }
                        ]
                    }
                ]
            }
        }
    },
    mounted() {
        this.option.series[0].data = this.data
    }
}
</script>

<style scoped>
.box {
    width: 96%;
    height: 53rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-left: 1rem;
}
.title {
    width: 100%;
    font-size: 1.8rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #222222;
    margin: 1.5rem 0 0 1.4rem;
    flex-shrink: 0;
}
.charts {
    width: 100%;
    height: 100%;
}
</style>